<template>
  <section>
    <div>
      <el-form :inline="true" :model="formInline" class="form-inline" label-width="120" label-position="left">
        <el-form-item
          v-for="(query, index) of searchFormQuery"
          :label="query.label"
          :class="{'el-form-item-custom' : query.model === 'region'}"
          :style="{'--i': index}"
        >
          <el-input
            v-if="query.type === 'input'"
            v-model="formInline[query.model]"
            :placeholder="query.label"
            clearable
          />
          <el-select
            v-else-if="query.type === 'select'"
            v-model="formInline[query.model]"
            :placeholder="query.label"
            clearable
          >
            <el-option label="Zone one" value="shanghai" />
            <el-option label="Zone two" value="beijing" />
          </el-select>
          <el-date-picker
            v-else-if="query.type === 'date'"
            v-model="formInline[query.model]"
            type="date"
            :placeholder="query.label"
            clearable
          />
        </el-form-item>
        <el-form-item class="el-form-item-buttons">
          <el-button type="primary">查询</el-button>
          <el-button type="primary" plain>重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </section>
  <section>
    <div class="al-divider"></div>
  </section>
  <section style="padding: 15px;">
    <el-row :gutter="20" style="float:right;z-index: 1;">
      <el-col :span="24" class="al-end">
        <!-- 此处暂时没有此功能 需要列表里绑定 :filters=[] -->
        <!-- <el-button @click="resetDateFilter" size="small">reset date filter</el-button> -->
        <el-button @click="clearFilter" size="small">reset all filters</el-button>
        <el-button type="success" size="small" :icon="Upload">
          导入
        </el-button>
        <el-button type="primary" size="small" :icon="Plus" @click="handleAdd">
          新增用户
        </el-button>
      </el-col>
    </el-row>
    <el-tabs
      v-model="activeName"
      :type=" true ? '' : 'card' || 'border-card'"
      @tab-click="handleClick"
    >
      <el-tab-pane label="User" name="first">
        <el-table
          :data="tableData"
          ref="tableRef"
          row-key="date"
          stripe
          border
          align="center"
          style="width: 100%;"
        >
          <el-table-column prop="name" label="Name" width="120" align="center" />
          <el-table-column
            prop="date"
            label="Date"
            sortable
            width="150"
            column-key="date"
            header-align="center"
            align="center"
          />
          <el-table-column prop="address" label="Address" :formatter="formatter" align="center" />
          <el-table-column
            prop="tag"
            label="Tag"
            width="100"
            :filters="[
              { text: 'Home', value: 'Home' },
              { text: 'Office', value: 'Office' },
            ]"
            column-key="filter-tag"
            :filter-method="filterTag"
            filter-placement="bottom-end"
            align="center"
          >
            <template #default="scope">
              <el-tag
                :type="scope.row.tag === 'Home' ? '' : 'success'"
                disable-transitions
                >{{ scope.row.tag }}</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column label="Operations" 
            header-align="left"
            align="center">
            <template #default="scope">
              <el-button
                type="primary" 
                size="small"
                @click="handleEdit(scope.$index, scope.row)"
              >Edit</el-button>
              <el-button
                size="small"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
              >Delete</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="Config" name="second">Config</el-tab-pane>
    </el-tabs>
  </section>
  <el-dialog
    v-model="centerDialogVisible"
    title="新增用户"
    width="500"
    align-center
  >
    <span>新增一条用户数据</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="centerDialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="centerDialogVisible = false">
          Confirm
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { ElMessageBox, type TableColumnCtx, type TableInstance, type TabsPaneContext } from 'element-plus'
import { Plus, Upload } from '@element-plus/icons-vue';

const searchFormQuery = [
  {
    label: 'Approved by',
    type: 'input',
    model: 'user'
  },
  {
    label: 'Activity zone',
    type: 'select',
    model: 'region'
  },
  {
    label: 'Activity time',
    type: 'date',
    model: 'date'
  },
  {
    label: 'Approved name',
    type: 'input',
    model: 'name1'
  },
  {
    label: 'Approved name',
    type: 'input',
    model: 'name2'
  }
]
const formInline = reactive({
  user: '',
  region: '',
  date: '',
})

const onSubmit = () => {
  console.log('submit!')
}

interface User {
  date: string
  name: string
  address: string
  tag: string
}

const tableRef = ref<TableInstance>()

/* const resetDateFilter = () => {
  tableRef.value!.clearFilter(['date'])
} */
const clearFilter = () => {
  // 传入由columnKey 组成的数组以清除指定列的过滤条件。
  // 重置所有列表筛选条件
  // tableRef.value!.clearFilter()
  // 重置列表某一项筛选条件
  tableRef.value!.clearFilter(['filter-tag'])
}


const activeName = ref('first')

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}

const formatter = (row: User, column: TableColumnCtx<User>) => {
  return row.address
}
const filterTag = (value: string, row: User) => {
  return row.tag === value
}
const filterHandler = (
  value: string,
  row: User,
  column: TableColumnCtx<User>
) => {
  console.log('============= value, row, column', value, row,column)
  const property = column['property']
  return row[property] === value
}
const centerDialogVisible = ref(false)
const handleAdd = () => {
  centerDialogVisible.value = true
}
const handleEdit = (index: number, row: User) => {
  console.log(index, row)
}
const handleDelete = (index: number, row: User) => {
  console.log(index, row)
  ElMessageBox.confirm(
    '确认 Delete 该用户？',
    '提示',
    {
      confirmButtonText: '删除',
      cancelButtonText: '犹豫',
      type: 'warning',
      // center: true,
      // icon: markRaw(),
      draggable: true,
    }
  ).then().catch(err => {
    console.log(err)
  })
}

const tableData: User[] = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    tag: 'Home',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    tag: 'Office',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    tag: 'Home',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    tag: 'Office',
  },
]

</script>
<style lang="scss">
.el-tabs__nav-wrap {
  overflow:unset;
}
.form-inline {
  margin: 10px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 10px;
  row-gap: 10px;
  .el-form-item {
    margin-bottom: 0;
    margin-right: 0;
  }
  .el-form-item-custom {
    grid-column: 2/4;
  }
  .el-form-item-buttons {
    grid-column: 1/4;
    .el-form-item__content {
      justify-content: center;
    }
  }
  .el-date-editor {
    --el-date-editor-width: 100%;
  }
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>